<!-- 列表item -->
<template>
	<view class="message">
		<!-- :disabled="true" 禁止左右滑动 -->
		<uni-swipe-action>
			<uni-swipe-action-item :right-options="state.options2" :auto-close="true">
				<view class="message-item" @click="chatPage()">
					<view class="message-item-left">
						<HeadImg :headAvatar="props.dataItem.Avatar" :RealState="props.dataItem.RealState"
							:imgWidth="120" />
					</view>
					<view class="message-item-right">
						<view class="message-item-right-top">
							<view class="message-item-right-top-left">
								<text class="name">{{props.dataItem.ShowName}}</text>
								<Ident :userInfo="props.dataItem" v-if="!props.dataItem.isHide" />
								<!-- <text v-if="!props.dataItem.isHide" class="line" :class="props.dataItem.IsOnline ? '' : 'line-out'">{{ props.dataItem.IsOnline ? '在线' : '离线'}}</text> -->
							</view>
							<view class="badge-box">
								<van-badge :content="curMessageNum" v-if="curMessageNum"></van-badge>
							</view>
						</view>
						<view class="message-item-right-bottom">
							<text class="msg-text">{{curMessage.text ? curMessage.text  : curMessage.pushContent ? curMessage.pushContent : ''}}</text>
							<text>{{ curMessage.time ? timerfn(new Date(curMessage.time)) : ''}}</text>
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>
<script setup>
	import {
		reactive,
		toRefs,
		ref,
		getCurrentInstance,
		onMounted,
		computed
	} from "vue"
	import {
		showToast
	} from 'vant';
	import {
		timer
	} from "@/utils/tool.js"
	import {
		getAuthorization,
		setAuthorization
	} from "@/utils/auth.js"

	const state = reactive({
		scrollTop: 0,
		isOpened: false,
		options2: [{
				text: '取消',
				style: {
					backgroundColor: '#007aff'
				}
			},
			{
				text: '确认',
				style: {
					backgroundColor: '#F56C6C'
				}
			}
		],
		userInfo: {}
	})

	const timerfn = (date) => {
		return timer(date, 'm-d h:m')
	}

	const props = defineProps({
		dataItem: {
			type: Object,
			default: () => {}
		}
	})

	import {
		useAccountStore
	} from "@/store/index.js"
	let store = useAccountStore()

	const curMessage = computed(() => {
		let userInfo = JSON.parse(getAuthorization("userInfo"))
		let userIMId = props.dataItem.IMId == 215 ? 100172 : props.dataItem.IMId
		state.userInfo = userInfo
		let userId = getAuthorization('userId')
		let resMes = store.$state.chatListAll
		console.log(resMes,'resMes')
		let cueMes = resMes.filter(o => ((o.chatType == 1 && o.from == userIMId) || (o
			.chatType == 2 && o.to == userIMId)) && o.msgUserId == userId)
		return cueMes.length > 0 ? cueMes[cueMes.length - 1] : {}
	})

	const curMessageNum = computed(() => {
		let userId = getAuthorization('userId')
		let userIMId = props.dataItem.IMId == 215 ? 100172 : props.dataItem.IMId
		return store.$state.chatListAll.filter(o => (o.chatType == 1 && o.from == userIMId) && o.isRead == 1 && o
			.msgUserId == userId).length
	})

	// 进入私聊
	const chatPage = () => {
		let item = props.dataItem
		// console.log(props.dataItem,'props.dataItem')
		// let url = (item.id == 1 || item.id == 2) ? '/pages/walletMessage/index' : '/pages/privateChat/index'
		// console.log(url,item)
		// let query = ""
		// if(item.id == 1 || item.id == 2){
		//     query = '?types=' + item.IMId  + '&userId=' + item.IMId
		// }
		let ID = item.IMId == 100172 ? 215 : item.IMId
		if (item.IMId == 100169) {
			store.updateIsRead(item.IMId)
			uni.navigateTo({
				url: '/pages/walletMessage/index?types=1'
			})
			// pages/home/person/myWallet/index
			return
		}
		if (item.IMId == 100170 || item.IMId == 100171) {
			let types = item.IMId == 100170 ? 2 : 3
			store.updateIsRead(item.IMId)
			uni.navigateTo({
				url: '/pages/walletMessage/index?types=' + types
			})
			return
		}
		uni.navigateTo({
			url: '/pages/privateChat/index?userIMId=' + ID
		})
	}
</script>

<style lang="scss" scoped>
	.message-item {
		display: flex;
		align-items: center;
		padding-left: 30rpx;
	}

	.message-item-left {
		width: 120rpx;
		height: 120rpx;
		margin-right: 24rpx;
		flex: none;

		.van-image {
			width: 120rpx;
			height: 120rpx;
		}
	}

	.message-item-right {
		width: 100%;
		padding: 40rpx 30rpx 40rpx 0;
		border-bottom: 1px solid #EBEBEB;

		.message-item-right-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;

			.badge-box {
				padding: 15rpx 15rpx 0 0;
			}
		}

		.message-item-right-top-left {
			display: flex;
			align-items: center;
			height: 42rpx;

			img {
				height: 28rpx;
				margin: 0 10rpx;
			}

			.name {
				font-size: 30rpx;
			}

			.line {
				font-size: 20rpx;
				background: #D1FFD6;
				color: #1FD351;
				height: 36rpx;
				line-height: 36rpx;
				padding: 0 8rpx;
				border-radius: 5rpx;
			}

			.line-out {
				background: #e2e2e2;
				color: #666;
			}
		}

		.message-item-right-bottom {
			display: flex;
			justify-content: space-between;
			color: #8D8D8D;
			font-size: 26rpx;
			margin-top: 8rpx;
		}
	}

	.content-box {
		flex: 1;
		/* #ifdef APP-NVUE */
		justify-content: center;
		/* #endif */
		height: 44px;
		line-height: 44px;
		padding: 0 15px;
		position: relative;
		background-color: #fff;
		border-bottom-color: #f5f5f5;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}

	.content-text {
		font-size: 15px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding: 10px 0;
		background-color: #fff;
	}

	.button {
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		padding: 4px 8px;
		border-radius: 4px;
	}

	.button-text {
		font-size: 15px;
	}

	.slot-button {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		background-color: #ff5a5f;
	}

	.slot-button-text {
		color: #ffffff;
		font-size: 14px;
	}

	.msg-text {
		display: block;
		width: 60%;
		overflow: hidden;
		height: 20px;
	}
</style>
